<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ulfather{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;/*设置为弹性盒*/
            background-color: rgb(239, 231, 211);/*设置栏目背景为深紫色*/
            box-shadow: 2px 5px 15px rgba(159, 158, 155, 0.7);/*阴影效果*/
            border-radius: 5px;/*圆角效果*/
            width: 720px;/*导航栏宽度*/
            height: 44px;/*导航栏长度*/
            line-height: 10px;/*文字垂直居中*/
        }
        .lifather{
            width: 120px;/*每个栏目占宽70像素，把350像素的导航栏5等分*/
            text-align: center;/*文字水平居中*/
            color: rgb(160, 160, 230);/*设置字体颜色为浅紫色*/
        }
        #personForm{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;/*设置为弹性盒*/
            /*background-color: rgb(250, 249, 247);!*设置栏目背景为深紫色*!*/
            /*box-shadow: 2px 5px 15px rgba(159, 158, 155, 0.7);!*阴影效果*!*/
            border-radius: 5px;/*圆角效果*/
            width: 120px;/*导航栏宽度*/
            height: 44px;/*导航栏长度*/
            line-height: 10px;/*文字垂直居中*/
        }
        .personForm{
            width: 120px;/*每个栏目占宽70像素，把350像素的导航栏5等分*/
            text-align: center;/*文字水平居中*/
            color: rgb(160, 160, 230);/*设置字体颜色为浅紫色*/
        }
        .ulson{
            list-style: none;
            width: 80px;/*导航栏宽度*/
            height: 44px;/*导航栏长度*/
            text-align: center;/*文字水平居中*/
            line-height: 22px;
            background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/
            border-radius: 0px 0px 5px 5px;/*圆角效果*/
            color: rgb(250, 250, 250);/*设置字体颜色为白色*/
            display: none;/*初始状态为隐藏*/
        }
        .personForm:hover .ulson{
            display: block;
        }
        .lison:hover{
            background-color: rgba(0, 0, 0, .3);
        }
        a{text-decoration:none}
        /*鼠标点击前*/
        a:link {
            color: #313030;
        }
        /*鼠标点击过后*/
        a:visited {
            color: #313030;
        }
        /*鼠标悬停时*/
        a:hover {
            color:#f99e01;
        }

        /*鼠标点击中*/
        a:active {
            color:#313030;
        }
    </style>
</head>
<script type="application/javascript" src="../../js/jquery-3.6.0.min.js"></script>
<body>
<ul id="ulfather">
    <li class="lifather">
        <a th:href="@{/moyue}">
            <img src="../../img/logo.jpg" width="35px;" height="35px;" style="border-radius: 30%;margin-top: 5px">
        </a>
    </li>
    <li class="lifather">
        <a th:href="@{/moyue}" target="_parent">
            <h3>首页</h3>
        </a>
    </li>
    <li class="lifather">
        <a th:href="@{/type/toQuery}" target="_parent">
            <h3>分类</h3>
        </a>
    </li>
    <li class="lifather">
        <a th:href="@{/toRankingIndex}" target="_parent">
            <h3>排行榜</h3>
        </a>
    </li>
    <li class="lifather">
        <a th:href="@{/user/toVip}" target="_parent">
            <h3>充值中心</h3>
        </a>
    </li>
    <li class="lifather">
        <a th:href="@{/user/toLoginAuthor}" target="_parent">
            <h3>作家专区</h3>
        </a>
    </li>
</ul>
<div style="float: right;margin-top: -40px;margin-right: 100px;position: relative;">
    <input name="keyPut" th:value="${key}" style="width: 240px;height: 32px;border: #f99e01 2px solid;border-radius: 20px;padding-left: 20px" type="text" placeholder="请输入书名/分类/作者">
    <button style="width: 80px;height: 36px;background-color: #f99e01;border-radius: 20px;border: none" onclick="toTypePage()">搜索</button>&nbsp;&nbsp;&nbsp;
    <th:block th:if="${application.user!=null}">
        <!--            <img id="personImg" src="../../img/logo.jpg" style="border-radius: 50%;width: 38px;height: 38px;  position: absolute; top: 50%;margin-top: -18px; ">-->
        <div style="border-radius: 50%;width: 38px;height: 38px;  position: absolute; top: 50%;margin-top: -18px;margin-left: 320px ">
            <ul id="personForm">
                <li class="personForm">
                    <img src="../../img/logo.jpg" style="border-radius: 50%;width: 38px;height: 38px;">
                    <ul class="ulson">
                        <li class="lison">
                            <a style="float: left" th:href="@{/user/toPersonCenter}" target="_parent">我的书架</a>
                        </li>
                        <li class="lison">
                            <a style="float: left" th:href="@{/user/removeUser}" target="_parent">退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </th:block>
    <th:block th:if="${application.user==null}">
        <a th:href="@{/user/toLoginReader}" target="_parent">
            <img src="../../img/icon/green_pixel_76.gif" style="width: 17px;height: 17px;position: absolute;top: 50%;margin-top: -9px;">
            <span style="font-size: 14px;color: #9d9c9c;margin-left: 18px">立即登录</span>
        </a>

    </th:block>
</div>

</body>
<script>
    function toTypePage(){
        let key = $("input[name=keyPut]").val();
        parent.location.href="/type/toQuery?key="+key;
    }
</script>
</html>